<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
        }
    </style>
    <script>
        window.onload = function () {
            //获取box1
            var box1 = document.getElementById("box1");
            //获取btn1
            var btn = document.getElementById("btn");

            var timer;
            //点击按钮后，box1向右移动
            btn.onclick = function () {
                clearInterval(timer);
                //开启一个定时器
                timer=setInterval(function () {
                    //获取box1原来的left值
                    var oldValue = parseInt(getStyle(box1, "left"));

                    //在旧值的基础上增加
                    var newValue = oldValue + 13;
                    //判断newValue是否达到800
                    if(newValue>800){
                        newValue=800;
                    }
                    //将新值设置给box1
                    box1.style.left = newValue + "px";
                    //当元素移动到800px时，使其停止执行动画
                    if(newValue==800){
                        clearInterval(timer);
                    }
                }, 30);
            };
        };
        /*
            定义一个函数，用来获取指定元素的当前样式
            参数：
                obj 获取样式的元素
                name 要获取的样式名
        */
        function getStyle(obj, name) {
            if (obj.currentStyle)//属性 返回 ture false 
            {
                return obj.currentStyle[name];
            }
            else {
                return getComputedStyle(obj, null)[name];
            }
        }
    </script>
</head>

<body>
    <button id="btn">点击按钮后向右移</button>
    <br />
    <br />
    <div id="box1"></div>
</body>

</html>